﻿@page "/MessageBox"

@using FluentUI.Demo.Shared.Pages.MessageBox.Examples;

<PageTitle>@App.PageTitle("MessageBox")</PageTitle>

<h1>MessageBox</h1>

<p>
    A MessageBox is a dialog that is used to display information with a specific intent to the user. It uses the
    <code>DialogService</code> to display the dialog.
</p>
<p>
    The <code>DialogService</code> is a singleton service that can be injected into any component. It exposes methods to show a dialog.
    For working with a <code>MessageBox</code>, the following methods are available:
    <ul>
        <li><code>ShowSuccess</code> / <code>ShowSuccessAsync</code></li>
        <li><code>ShowWarning</code> / <code>ShowWarningAsync</code></li>
        <li><code>ShowInfo</code> / <code>ShowInfoAsync</code></li>
        <li><code>ShowError</code> / <code>ShowErrorAsync</code></li>
        <li><code>ShowConfirmation</code> / <code>ShowConfirmationAsync</code></li>
        <li><code>ShowMessageBox</code> / <code>ShowMessageBoxAsync</code></li>
    </ul>
    For more information on how to use the <code>DialogService</code>, see the <a href="/DialogService">DialogService</a> page.
</p>
<p>
    For defining the information to display in the <code>MessageBox</code>, the <code>MessageBoxData</code> class is used. See the API documentation
    below for the available properties.
</p>
<p>
    The <code>MessageBoxData</code> class is then used as the generic type parameter for the <code>DialogParameters</code> class.
    The <code>DialogParameters</code> class is used to pass parameters to the <code>DialogService</code> when showing a dialog.
</p>

<p>
    When both the <code>PrimaryButton</code> and <code>SecondaryButton</code> properties are set, the <code>MessageBox</code> will be
    displayed as a modal. This means that the user has to click one of the buttons to close the dialog. It cannot be closed by clicking
    outside of the dialog. Clicking <code>PrimaryButton</code> will return <code>true</code> and clicking <code>SecondaryButton</code> will
    return <code>false</code> as the dialog result. See the Console log for these return values.
</p>
<p>
    Internally, the <code>ShowMessageBox</code> methods call the <code>ShowDialog</code> methods. If is possible to directly call these methods and thereby have
    access to all of the parameters. The <code>ShowMessageBox</code> variants are just convenience methods that make ite easier to work with panels.
</p>


<h2 id="example">Example</h2>

<DemoSection Title="MessageBoxAsync" Component="@typeof(DialogMessageBoxAsync)">
    <p>The buttons below call the <strong>async</strong> MessageBox methods on the DialogService.</p>
</DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(MessageBoxContent)" />

<ApiDocumentation Component="typeof(DialogParameters<>)" InstanceTypes="@(new[] {typeof(MessageBoxContent)})" GenericLabel="MessageBoxData" />
